全局引入vue-baidu-map
import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {
  // ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
  ak: 'nTy3oSIPnOtE3Mc0wabGgzfwqAZhMqZE'
})

<template>
<el-dialog
    center
    v-loading="loading"
    append-to-body
    title="地图选址"
    width="70%"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    :before-close="handleClose">
  <div class="map-warp">
    <el-row
      :gutter="20"
      style="padding: 20px 0;width:90%; position:absolute;top:10%;left:3%;z-index:99"
    >
      <el-col :span="8">
        <el-input placeholder="查询" v-model="address"></el-input>
      </el-col>
      <el-col :span="12">
        <el-button
          type="primary"
          @click="toggle('polygonPath')"
        >{{ polygonPath.editing ? '重新绘制' : '开始绘制' }}</el-button>
        <el-button type="primary" @click="save">保存</el-button>
      </el-col>
    </el-row>
    <baidu-map
      :scroll-wheel-zoom="true"
      class="map"
      ak= "nTy3oSIPnOtE3Mc0wabGgzfwqAZhMqZE"
      :center="center"
      :zoom="zoom"
      :map-click="false"
      @click="drawLine"
    >
      <bm-polygon
        :path="path"
        v-for="path of polygonPath.paths"
        :key="path.toString()"
        stroke-color="blue"
        fill-color="red"
        :fill-opacity="0.8"
        :stroke-opacity="0.5"
        :stroke-weight="2"
        :editing="polygonPath.editing"
        @lineupdate="updatePolygonPath"
      />
      <bm-marker
        v-for="(item, index) in polygonPath.paths[0]"
        :position="item"
        :key="index"
        :dragging="false"
      ></bm-marker>
      <bm-local-search :keyword="address" :auto-viewport="true" style="display: none"></bm-local-search>
    </baidu-map>
  </div>
</el-dialog>
</template>

<script>
// import BaiduMap from "vue-baidu-map/components/map/Map.vue";
// import BmPolygon from "vue-baidu-map/components/overlays/Polygon";
// import BmMarker from "vue-baidu-map/components/overlays/Marker";
// import BmLocalSearch from "vue-baidu-map/components/search/LocalSearch";
export default {
  name: "BDMap",
  data() {
    return {
      dialogVisible: true,
      map: null,
      center: { lng: 117.000923, lat: 36.675808 },
      zoom: 15,
      address: "", // 查询地址关键字
      polygonPath: {
        editing: false,
        paths: [] // 绘制完成后的经纬度，其实是在画的时候动态push的，因为在点击的时候触发了 paintPolygon 函数
      }
    };
  },
  // components: { BaiduMap, BmPolygon, BmMarker, BmLocalSearch },
  methods: {
    // 开启多边形绘制
    toggle(name) {
      this[name].editing = !this[name].editing;
      // 在这里做一步判断，如果有路径且开启绘制就把原来的路径清空
      if (this.polygonPath.paths) {
        this.polygonPath.paths = [];
      }
    },

    // 鼠标左键键多边形绘制
    drawLine(e) {
      if (!this.polygonPath.editing) {
        return;
      }
      const { paths } = this.polygonPath;
      !paths.length && paths.push([]);
      paths[0].push(e.point);
    },

    // 修改拖拽坐标
    updatePolygonPath() {
      // this.polygonPath.paths[0] = e.target.getPath();
    },

    // 保存
    save() {
      //debugger
      if (!this.polygonPath.editing) {
        return;
      }
      // 当开始绘制后把按钮调回开始绘制状态，防止绘制多个图形
      this["polygonPath"].editing = !this["polygonPath"].editing;
      const { paths } = this.polygonPath;
      if (!paths.length) {
        paths.push([]);
      }
      // if (paths[0].length > 2) { // 3个点才能成区域
      //   // 保存处理相关坐标和请求接口
      //   var str = JSON.stringify(this.polygonPath.paths[0]);
      //   var params = JSON.stringify({
      //     name: "123",
      //     area: str
      //   });
      //   console.log(params);
      // }
      console.log(this.polygonPath.paths[0])
      this.$emit('saveMap', this.polygonPath.paths[0])
      this.$emit('mapClose')
      this.getCenterPoint(this.polygonPath.paths[0])// 获取点的中心坐标
    },
    handleClose() {
      this.$emit('mapClose')
    }, 
    // 获取点的中心坐标
    getCenterPoint(path) {
      var x = 0.0;
      var y = 0.0;
      for (var i = 0; i < path.length; i++) {
        x = x + parseFloat(path[i].lng);
        y = y + parseFloat(path[i].lat);
        }
      x = x/path.length;
      y = y/path.length;
      console.log('x:'+x+'y:'+y)
      const maps = {
        lng: x,
        lat: y
      }
      this.$emit('mapCenter', maps)
    }
  }
};
</script>

<style lang="scss">
.map {
  width: 100%;
  height: 70vh;
}
// 去除百度的logo
.BMap_cpyCtrl {
  display: none;
}
.anchorBL {
  display: none;
}
</style>
